<template>
  <b-col class="mt-1">
    <!-- <b-row>
      <NavigationBar :type="0" />
    </b-row> -->
    <b-row>
      <b-container>
        <!-- 第一行 -->
        <b-row>
          <b-col class="headImage rounded-lg" :style="{background:'url('+user.backgroundUrl+') center'}" @mouseenter="cover = true" @mouseleave="cover = false">
            <b-row v-if="cover&&isLoginUser" class="pt-2 pr-3" align-h="end">
              <b-col class="col-auto rounded-lg cover">
                <b-link @click="changeCover" class="text-decoration-none" style="font-size:13px;color:white">更换封面</b-link>
              </b-col>
              <div class="w-100" />
              <b-col class="col-auto mt-2">
                <b-btn v-show="toChange" size="sm" style="font-size:12px" @click="uploadCover()" variant="primary"> 确定 </b-btn>
              </b-col>
            </b-row>
            <ImgCutter ref="imageCut" class="col col-auto" :cutWidth="1140" :cutHeight="253" :boxWidth="1280" :boxHeight="720" :sizeChange="false"
              :toolBoxOverflow="false" :originalGraph="false" :tool="false" rate="4.5:1" WatermarkText="wacFun" :quality="0.9" @cutDown="cutDownCover" />
          </b-col>
        </b-row>
        <!-- 第二行 -->
        <b-row class="mt-2">
          <!-- 左侧卡片 -->
          <b-col class="col-8">
            <!-- 上方信息和编辑 -->
            <b-row class="pt-2 bg-white rounded-lg" style="height:100px">
              <b-col class="col-auto">
                <b-img-lazy class="rounded-circle border" width="100px" height="100px"
                  blank-src="https://s1.imagehub.cc/images/2023/03/27/2374f80ecf7fed0f7d4ba8cdf4d0d211.webp" :src="user.headUrl" />
              </b-col>
              <b-col>
                <b-row style="font-family:HYZhengYuan-85S">
                  <h3>{{user.name}}</h3>
                </b-row>
                <b-row style="font-family:HYZhengYuan-55S">
                  {{user.text}}
                </b-row>
              </b-col>
              <b-col v-if="isLoginUser" class="col-auto" align-self="center">
                <b-button class="personEditBtn" variant="outline-primary" v-b-modal.update>编辑资料</b-button>
              </b-col>
            </b-row>
            <!-- 下方功能区 -->
            <b-row class="pt-2 justify-content-center bg-white" style="height:45px;font-family:HYZhengYuan-55S">
              <!-- 帖子 -->
              <b-col class="col-auto mr-5" :class="{isClick:this.$route.name == 'issue'}">
                <b-link :to="'IssueCard?id='+this.$route.query.id" style="font-size:18px" class="text-decoration-none text-dark">动 态</b-link>
              </b-col>
              <!-- 回复 -->
              <b-col class="col-auto mr-5" :class="{isClick:this.$route.name == 'comment'}">
                <b-link :to="'CommentCard?id='+this.$route.query.id" style="font-size:18px" class="text-decoration-none text-dark">吐 槽</b-link>
              </b-col>
              <!-- 点评 -->
              <b-col class="col-auto mr-5" :class="{isClick:this.$route.name == 'criticism'}">
                <b-link :to="'CriticismCard?id='+this.$route.query.id" style="font-size:18px" class="text-decoration-none text-dark">点 评</b-link>
              </b-col>
              <!-- 消息 -->
              <b-col v-if="isLoginUser" class="col-auto mr-5" :class="{isClick:this.$route.name == 'message'}">
                <b-link :to="'MessageCard?id='+this.$route.query.id" style="font-size:18px" class="text-decoration-none text-dark">消 息</b-link>
                <b-badge v-show="messageNum!=0" variant="danger">{{messageNum}}</b-badge>
              </b-col>
            </b-row>
            <!-- 下方内容 -->
            <b-row class="mt-2 bg-white rounded-lg">
              <router-view :id="this.$route.query.id" />
            </b-row>
          </b-col>
          <!-- 右侧卡片 -->
          <b-col class="ml-2">
            <!-- 数据 -->
            <UserInfo :info="this.user.statistical" />
            <!-- 功能区 -->
            <b-row class="mt-2">
              <b-col class="rounded-lg bg-white pb-2">
                <!-- 第一行 -->
                <b-row class="text-center">
                  <!-- <b-col v-if="isLoginUser">
                    <b-link @click="display=1" class="text-decoration-none text-dark iconfont icon-setting" style="font-size:50px" title="设置" />
                  </b-col> -->
                  <b-col style="color:red">
                    <b-link @click="display=2" class="text-decoration-none iconfont" :class="display == 2?'icon-like_fill':'icon-fabulous'"
                      style="font-size:50px" :style="{color:display == 2?'red':'black'}" title="追番列表" />
                  </b-col>
                  <b-col>
                    <b-link @click="display=3" class="text-decoration-none iconfont" style="font-size:50px"
                      :class="display == 3?'icon-smile-filling':'icon-smile'" :style="{color:display == 3?'orange':'black'}" title="朋友" />
                  </b-col>
                  <div class="w-100" />
                  <!-- <b-col v-if="isLoginUser">
                    设置
                  </b-col> -->
                  <b-col>
                    追番
                  </b-col>
                  <b-col>
                    朋友
                  </b-col>
                </b-row>
              </b-col>
            </b-row>
            <!-- 展示内容 -->
            <b-row class="rounded-lg bg-white mt-2">
              <!-- 显示设置选项 -->
              <Settings :id="this.$route.query.id" v-show="display == 1" />
              <!-- 显示追番列表 -->
              <BangumiFollow :id="this.$route.query.id" v-show="display == 2" />
              <!-- 显示朋友列表 -->
              <FriendList :id="this.$route.query.id" v-show="display == 3" />
            </b-row>
          </b-col>
        </b-row>
      </b-container>
    </b-row>
    <!-- 一个模拟框 -->
    <b-modal title="修改信息" header-class="border-0" footer-class="border-0" button-size="sm" id="update" hide-header-close ok-title="发布" cancel-title="取消"
      :no-close-on-backdrop="true" aria-hidden="true" centered @hidden="cancel" @ok="issue">
      <!-- @hidden="cancel" @ok="issue" -->
      <b-col>
        <b-row>
          <b-col class="text-center" align-self="center">
            <ImgCutter class="col col-auto" :cutWidth="200" :cutHeight="200" :sizeChange="true" :toolBoxOverflow="false" :originalGraph="true" :tool="false"
              rate="1:1" WatermarkText="wacFun" @cutDown="cutDown">
              <template #open>
                <b-img class="rounded-circle border" height="100" width="100" :src="userUpdate.file.dataURL" title="上传头像" />
              </template>
            </ImgCutter>
          </b-col>
        </b-row>
        <b-row class="mt-3">
          <b-col class="col-3 text-center">
            昵称
          </b-col>
          <b-col class="col-5 pr-0">
            <b-input type="text" size="sm" v-model="userUpdate.name" />
          </b-col>
          <b-col class="pl-1 col-auto">
            <span v-show="nameAffirm" class="iconfont icon-delete-filling" style="color:red" />
          </b-col>
        </b-row>
        <b-row class="mt-3">
          <b-col class="col-3 text-center">
            签名
          </b-col>
          <b-col class="col-9">
            <b-row>
              <b-col>
                <b-textarea maxlength="32" autofocus v-model="userUpdate.text" class="textArea" no-resize />
              </b-col>
              <div class="w-100" />
              <b-col class="text-right" v-if="userUpdate.text != ''">
                {{userUpdate.text.length}}/32
              </b-col>
            </b-row>
          </b-col>
        </b-row>
      </b-col>
    </b-modal>
  </b-col>
</template>
<script>
import UserInfo from './others/UserInfo'
import BangumiFollow from './others/BangumiFollow'
import Settings from './others/Settings'
import FriendList from './others/FriendList'
import ImgCutter from 'vue-img-cutter'
import toastr from "toastr";
export default {
  components: {
    UserInfo,
    Settings,
    BangumiFollow,
    FriendList,
    ImgCutter
  },
  data() {
    return {
      //控制右下角设置、追番、朋友的显示内容 默认是2
      display: 2,
      //是否是已登录用户
      isLoginUser: false,
      //访问信息
      queryInfo: {
        id: this.$route.query.id,
      },
      //获取到的用户数据
      user: {
        headUrl: "https://s1.imagehub.cc/images/2023/03/27/2374f80ecf7fed0f7d4ba8cdf4d0d211.webp",
        name: "加载中",
        text: "加载中",
      },
      //帖子卡片数据
      taComment: null,
      taCriticism: null,
      message: null,
      //控制有几条消息
      messageNum: 0,
      //修改资料用户信息
      userUpdate: {
        file: {

        },
        name: null,
        text: "",
      },
      //控制昵称检查
      nameAffirm: false,
      //控制换封面图的显示
      cover: false,
      //更换封面图后的确认按钮
      toChange: false,
    }
  },
  created() {
    //该id是否是登录用户
    this.$httpUser.isUserLogin().then((res) => {
      if (res == this.$route.query.id) {
        this.isLoginUser = true;
      }
    });
    this.$httpIssue.getUserMessage(1, this.$route.query.id, 0).then((res) => {
      this.messageNum = res.total;
    })
    this.getBaseInfo();
  },
  methods: {
    getBaseInfo() {
      //获取该页面用户基本信息
      this.$httpUser.getUserInfo(this.$route.query.id, 1).then((res) => {
        //赋值
        this.user = res;
        //设置路由标题
        document.title = res.name + " 的主页";
      });
    },
    //将剪裁图片返回并预览
    cutDown(res) {
      this.userUpdate.file = res;
      console.log(res.file);
    },
    cutDownCover(res) {
      this.userUpdate.file = res;
      console.log(res.file);
      if (res.file.size > 2621440) {
        toastr.error('文件不得超过2.5M', '打咩', { timeOut: 3000 });
        return
      }
      this.toChange = true;
      this.user.backgroundUrl = res.dataURL;
    },
    //取消
    cancel() {
      this.userUpdate.file = {}
    },
    issue() {
      let type = null;
      this.userUpdate.text = this.userUpdate.text.replace(/\s+/g, '');
      if (this.userUpdate.text.length == 0) {
        this.userUpdate.text = null
      }
      if (this.userUpdate.file.file != null) {
        type = "file"
      } else {
        type = "text"
      }
      if (this.userUpdate.name != null) {
        this.userUpdate.name = this.userUpdate.name.replace(/\s+/g, '');
        if (this.userUpdate.name.length != 0) {
          this.$httpUser.affirm("name", this.userUpdate.name).then((res) => {
            if (res == "1") {
              this.$httpUser.updateUser(this.formDataToPackage(type), type).then((res) => {
                if (res == "1") {
                  setTimeout(() => {
                    window.location.reload();
                  }, 2000)
                }
              }).catch((err) => {
                console.log(err);
              });
            } else {
              this.nameAffirm = false;
            }
          }).catch((err) => {
            console.log(err);
          });
        }
      } else {
        this.$httpUser.updateUser(this.formDataToPackage(type), type).then((res) => {
          if (res == "1") {
            setTimeout(() => {
              window.location.reload();
            }, 2000)
          }
        }).catch((err) => {
          console.log(err);
        });
      }
    },
    //封装表单对象
    formDataToPackage(type) {
      //封装对象
      var user = JSON.stringify({
        name: this.userUpdate.name,
        text: this.userUpdate.text,
      });
      //转换为json请求头
      user = new Blob([user], {
        type: 'application/json',
      })
      //创建表单对象
      let formData = new FormData();
      if (type == "file") {
        formData.append("file", this.userUpdate.file.file);
        formData.append("where", 1);
      }
      formData.append("user", user);
      return formData;
    },
    //更换封面
    changeCover() {
      this.$refs.imageCut.handleOpen();
    },
    //上传封面
    uploadCover() {
      var user = JSON.stringify({
        name: null,
        text: null,
      });
      //转换为json请求头
      user = new Blob([user], {
        type: 'application/json',
      })
      let formData = new FormData();
      formData.append("file", this.userUpdate.file.file);
      formData.append("user", user);
      formData.append("where", 2);
      this.$httpUser.updateUser(formData, "file").then((res) => {
        if (res == "1") {
          this.toChange = false;
          setTimeout(() => {
            window.location.reload();
          }, 2000)
        }
      }).catch((err) => {
        console.log(err);
      });
    }
  },
}
</script>
<style scoped>
.headImage {
  height: 253px;
  background-size: 100%;
  background-color: #767676;
}
.personEditBtn:hover,
.personEditBtn:focus,
.form-control:focus,
.btn:focus,
.textArea:focus {
  outline: none;
  box-shadow: none;
}
.isClick {
  border-bottom: solid 3px #0c91de;
}
.content {
  font-family: HYZhengYuan-55S;
  font-size: 14px;
  color: black;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4; /* 要显示的行数 */
  -webkit-box-orient: vertical;
}
.cover {
  background-color: #0000004a;
}
.cover:hover {
  background-color: #0000006a;
}
</style>
